import routes from '@/routes';
import { IRouteItem } from '@/routes/RouteType';
import { findItemIndex, getParentsByPath } from '@/routes/RouteUtil';
import { Button, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { ContainerLayout } from '../style';
const { TabPane } = Tabs;

const TabsLayout = styled(Tabs)`
  width: 100%;

  .ant-tabs-nav {
    min-height: 50px;
    margin-bottom: 0;
    padding: 0 20px;
    .ant-tabs-nav-wrap {
      .ant-tabs-nav-list {
        .ant-tabs-tab {
          padding: 13px 0;
          font-size: 14px;

          + .ant-tabs-tab {
            margin-left: 30px;
          }

          &.ant-tabs-tab-active .ant-tabs-tab-btn {
            /* color: var(--color-primary); */
          }
        }
      }
    }
  }

  .ant-tabs-content-holder {
    .ant-tabs-content {
      position: relative;
      .ant-tabs-tabpane {
        position: relative;
        display: flex;
        flex-direction: column;
      }
    }
  }
`;

interface Props {
  activeTabKey?: string;
}

const AppTabs: React.FC<Props> = (props) => {
  const { activeTabKey } = props;
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [currentMenu, setCurrentMenu] = useState<IRouteItem>();
  const [tabMenus, setTabMenus] = useState<IRouteItem[]>([]);
  const [activeKey, setActiveKey] = useState(activeTabKey ?? '');

  const onTabChange = (key: string) => {
    setActiveKey(key);
    navigate(`${key}`);
    console.log(key);
  };

  useEffect(() => {
    if (pathname) {
      const parents: IRouteItem[] = getParentsByPath(routes, pathname);

      const currentMenu: IRouteItem = parents?.[parents?.length - 1] ?? null;
      const currentChildren = currentMenu?.children ?? [];
      const currentIdx = findItemIndex(parents, currentMenu);

      const parentMenu: IRouteItem = parents?.[currentIdx - 1] ?? null;
      const parentChildren = parentMenu?.children ?? [];

      setCurrentMenu(currentMenu);

      if (currentMenu?.hideChildrenInMenu) {
        setTabMenus(currentChildren);
      } else {
        if (parentChildren?.length) {
          setTabMenus(parentChildren);
        } else {
          setTabMenus([]);
        }
      }
    }
  }, [pathname]);

  useEffect(() => {
    if (currentMenu && tabMenus?.length) {
      const currentIdx = findItemIndex(tabMenus, currentMenu);
      setActiveKey(currentIdx > -1 ? pathname : tabMenus?.[0].path ?? '');
    }
  }, [tabMenus, currentMenu, pathname]);

  return (
    <ContainerLayout>
      <TabsLayout
        activeKey={activeKey}
        tabBarExtraContent={<Button>Extra Action</Button>}
        onChange={onTabChange}>
        {tabMenus.map((item, idx) => {
          return (
            <TabPane tab={item.label} key={item.key}>
              Content of card tab {idx}
            </TabPane>
          );
        })}
      </TabsLayout>
    </ContainerLayout>
  );
};
export default AppTabs;
